<template>
  <div class="user-list">
    <ToolBar>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addUser(false)">添加</el-button>
      <div style="float: right">
        <el-input
            placeholder="请输入用户昵称！"
            size="small"
            style="width: 140px"
            v-model="params.name"
            @clear="searchUser"
            clearable>
        </el-input>
        <el-button @click="searchUser" type="success" icon="el-icon-search" size="small"></el-button>
      </div>
    </ToolBar>
    <el-table
        :data="usersData"
        border
        ref="table"
        style="width: 100%">
      <el-table-column prop="usrName" label="用户名称"> </el-table-column>
      <el-table-column prop="usrCode" label="手机号"> </el-table-column>
      <el-table-column prop="usrType" label="用户类型">
         <div slot-scope="scope" style="width: 100%;text-align: center">{{$config.userType[scope.row.usrType]}}
         </div>
      </el-table-column>
      <el-table-column prop="companyName"  label="公司名称"> </el-table-column>
      <el-table-column prop="effStatus" label="生效状态">
        <div slot-scope="scope" style="width: 100%;text-align: center">{{ scope.row.effStatus ?
          $config.yesOrNo[scope.row.effStatus]:'未判定' }}
        </div>
      </el-table-column>
      <el-table-column prop="pwdErrNum" label="密码错误次数"> </el-table-column>
      <el-table-column prop="regTime" label="注册时间"> </el-table-column>
      <el-table-column prop="lastUsr" label="最后修改人"> </el-table-column>
      <el-table-column prop="modifyTime" label="最后修改时间"> </el-table-column>

      <el-table-column
          label="操作"
          :render-header="tableAction"
          width="180">
        <template slot-scope="scope">
            <el-button @click="resetting(scope.row.id)" type="warning" style="transition: .4s;"  :ref="scope.row.id"  icon="el-icon-refresh" size="small" circle></el-button>
            <el-button @click="editUser(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
            <el-button @click="deleteUser(scope.row.id)" v-if="scope.row.active != '0'" type="danger" icon="el-icon-delete" circle size="small"></el-button>
            <el-button @click="deleteUser(scope.row.id)" v-else icon="el-icon-check" circle size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <AddDialog
            :title="addDialogTitle"
            :dialogFormVisible="addDialogVisible"
            @val-change="addUserCommit"
            @cancel="addDialogVisible = false"
        >
    </AddDialog>

    <EditDialog
            :title="editDialogTitle"
            :dialogFormVisible="editDialogVisible"
            :data="curItem"
            @val-change="editUserCommit"
            @cancel="editDialogVisible = false"
        >
    </EditDialog>
  </div>
</template>

<script>
   import ToolBar from '@/components/view/ToolBar.vue';
   import HelpHint from '@/components/view/HelpHint.vue';

   import AddDialog from './AddDialog.vue'
   import EditDialog from './EditDialog.vue'

  export default {
    data() {
      return {
        params: {
          name: '',
        },
        addDialogTitle: '新增用户',
        addDialogVisible: false,
        editDialogTitle: '编辑用户',
        editDialogVisible: false,
        curItem: null,
        usersData: [ ]
      }
    },
    methods: {
      init(){
          this.$APIS.default.queryUsers({})
               .then(res => {
                    this.usersData= res.data.body
          });
      },
      searchUser(){
        let tableRow = this.$refs.table.$el.querySelectorAll('tbody tr');
        let tableRowHeight = tableRow[1].offsetHeight;
        let isjump = false;
        for (let i = 0;i < this.usersData.length; i ++){
          if(this.params.name && (this.usersData[i].usrName.indexOf(this.params.name) != -1 ||this.usersData[i].companyName.indexOf(this.params.name) != -1 )){
            tableRow[i].style.backgroundColor = '#85ce61';
            if(! isjump){
              scrollTo(0,i*tableRowHeight + 66 );isjump = true;
            }
          }else {
            tableRow[i].style.backgroundColor = '#fff';
          }
        }
      },
      tableAction(){
        return this.$createElement('HelpHint',{
            props:{
              content:'重置密码为123456 / 编辑用户 / 删除或恢复用户'
            }
          },'操作');
      },
      editUser(data) {
          let self=this;
          self.editDialogVisible = true;
          self.curItem = data;
      },
      editUserCommit(data) {

      },
      addUser( ) {
         let self=this;
         self.addDialogVisible = true;
         self.curItem = null;
      },
      addUserCommit(){

      },
      deleteUser(id) {

          this.$message({
            message: '这里请求api删除或者恢复用户之后刷新分页组件，列表自动更新',
            type: 'success'
          });

      },
      resetting(id) {
         let self = this;
         self.$confirm('此操作将重置用户登陆密码, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
             this.$APIS.default.resetUserPwd(moduleId,{})
                  .then(res =>  self.$commonFunc.resolveRspMsg(self,res),self.init());
         }).catch(() => {

         });

      },


    },
    components: {
      ToolBar,HelpHint,AddDialog,EditDialog
    },
    mounted: function () {
       this.init();
    }
  }
</script>
<style lang="less">

</style>
